<template>
	<div v-show="bugList.length">
		<table>
			<thead>
				<tr>
					<th class="c1" style="min-width: 50px;width: 10%;text-align: center">全选
						<!--<input type="checkbox"	v-model="isAll":checked="isAll" v-model="isAll" @click="selectAllCallback">-->
						<input type="checkbox" v-model="isAll" @click="selectAll">
					</th>

					<th>bug描述</th>
					<th class="c2"  style="min-width: 50px;width: 10%;text-align: center">操作</th>
				</tr>
			</thead>
			<tbody>
				<BugItem v-for="item,index in bugList"
						 :key="item.id"
						 :item="item"
						 :resolvedClickCallback="resolvedClickCallback"
						 :delCallback="delCallback"
						 :updateDesc="updateDesc"

				></BugItem>

			</tbody>
		</table>
	</div>	
</template>

<script>
	import BugItem from './BugItem.vue'
	export default{
		name:'BugList',
		data(){
		    return{

			}
		},
		components:{
			BugItem
		},
        props:['bugList','resolvedClickCallback','delCallback','selectAllCallback','updateDesc'],
		methods:{
            selectAll(event){
                this.selectAllCallback(event.target.value)
			}
		},
		computed:{
            state(){
                var flag = true
                this.bugList.forEach((item)=>{
                    if(!item.resolved&&flag){
                        flag = false;
					}
				})
				return flag
			},
            resolvedCount(){
                return this.bugList.reduce((a,b)=>a+ (b.resolved ?1:0),0);
            },
			// isAll(){
            //     return this.bugList.length===this.resolvedCount&&this.bugList.length>0
			// },
			isAll:{
                get(){
					return this.bugList.length===this.resolvedCount&&this.bugList.length>0;
				},
				set(value){
                    console.log(value)
                    this.selectAllCallback(value)
				}
			}

		}

	}
</script>

<style scoped>
	table {
		border-collapse: collapse;
		width: 100%;
		max-width: 1200px;
	}

	th, td {
		text-align: left;
		padding: 10px;
		border: 1px solid #ccc;
	}

	th {
		background-color: #f2f2f2;
		font-size: 24px;
		line-height: 24px;
	}

	tr:nth-child(even) {
		background-color: #e6e6e6;
	}

</style>